import { Link, NavLink, Route, Routes } from 'react-router-dom';
import './App.css';
import Home from './Home';
import Cart from './Cart';
import Hot from './Hot';
import Fast from './Fast';

function App() {
  return (
    <div>
      <h3>导航区域</h3>
      <hr />
      <ul>
        <li>
          <NavLink className={isActive => isActive ? 'red' : ''} to="/">首页</NavLink>
        </li>
        <li>
          <NavLink className={isActive => isActive ? 'red' : ''} to="/cart">购物车</NavLink>
        </li>
      </ul>
      <hr />
      <Routes>
        <Route extra path="/" element={<Home />}>
          <Route index element={<Hot />} />
          <Route path="fast" element={<Fast />} />
        </Route>
        <Route path="/cart" element={<Cart />} />
      </Routes>
    </div>
  );
}

export default App;
